<template>
  <Layout>
    <div style="position: absolute; width: 100%; height: 100%; background:#f0f2f5;">
      <Row style="top: 15%;">
        <Col span="10" offset="7">
          <div style="padding: 30px 0;">
            <Card :bordered="false">
              <Tabs :value="selectValue" @on-click="changeTabs">
                <TabPane label="个人信息" name="tab1">
                  <Row style="margin: 30px 0;">
                    <Col span="12" class-name="images">
                      <div style="height: 200px;">
                        <Upload action="//jsonplaceholder.typicode.com/posts/">
                          <span>
                            <Icon type="ios-camera" size="64" color="#cfcfcf"/>
                          </span>
                        </Upload>
                      </div>
                      <!-- <Avatar icon="ios-person" size="large" /> -->
                    </Col>
                    <Col span="12" class-name="information">
                      <p>
                        <span>姓名：</span>
                        {{information.name}}
                      </p>
                      <p>
                        <span>部门：</span>
                        {{information.name}}
                      </p>
                      <p>
                        <span>岗位：</span>
                        {{information.postName}}
                      </p>
                      <p>
                        <span>号码：</span>
                        {{information.mobile}}
                      </p>
                      <p>
                        <span>邮箱：</span>
                        {{information.email}}
                      </p>
                      <Button
                        type="primary"
                        style="margin-top: 30px;"
                        @click="selectValue = 'tab2'"
                      >修改密码</Button>
                    </Col>
                  </Row>
                </TabPane>
                <TabPane label="修改密码" name="tab2">
                  <Row style="margin: 30px 0;">
                    <Col span="12" offset="6">
                      <Form
                        ref="formValidate"
                        :model="formValidate"
                        :rules="ruleValidate"
                        :label-width="80"
                      >
                        <FormItem label="账户" prop="name">
                          <Input v-model="formValidate.name" placeholder="请输入账号" disabled></Input>
                        </FormItem>
                        <FormItem label="原密码" prop="oldPw">
                          <Input v-model="formValidate.oldPw" placeholder="请输入原密码"></Input>
                        </FormItem>
                        <FormItem label="新密码" prop="password">
                          <Input
                            type="password"
                            v-model="formValidate.password"
                            placeholder="请输入新密码"
                          ></Input>
                        </FormItem>
                        <FormItem label="再次输入" prop="ConfirmPassword">
                          <Input
                            type="password"
                            v-model="formValidate.ConfirmPassword"
                            placeholder="请再次输入新密码"
                          ></Input>
                        </FormItem>
                        <FormItem>
                          <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                          <Button style="margin-left: 8px" @click="selectValue = 'tab1'">取消</Button>
                        </FormItem>
                      </Form>
                    </Col>
                  </Row>
                </TabPane>
                <Button @click="goHome" size="small" slot="extra">返回主界面</Button>
              </Tabs>
            </Card>
          </div>
        </Col>
      </Row>
    </div>
  </Layout>
</template>

<script>
export default {
  data: function () {
    const validatePassword = (rule, value, callback) => {
      if (value == this.formValidate.oldPw) {
        callback(new Error('新密码与原密码相同'))
      } else {
        callback()
      }
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value !== this.formValidate.password) {
        callback(new Error('两次密码不相同'))
      } else {
        callback()
      }
    }
    return {
      selectValue: 'tab1',
      information: {},
      formValidate: {
        name: '',
        oldPw: '',
        password: '',
        ConfirmPassword: ''
      },
      ruleValidate: {
        oldPw: [
          { required: true, message: '请在此处输入原密码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请在此处输入新密码', trigger: 'blur' },
          {
            type: 'string',
            min: 6,
            message: '密码长度不可小于6位',
            trigger: 'blur'
          },
          { validator: validatePassword, trigger: 'blur' }
        ],
        ConfirmPassword: [
          {
            required: true,
            message: '请在此处再次输入新密码',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: '密码长度不可小于6位',
            trigger: 'blur'
          },
          { validator: validatePassCheck, trigger: 'blur' }
        ]
      }
    }
  },
  created: function () {
    this.getInfoamation()
  },
  methods: {
    getInfoamation: function () {
      let self = this
      window.myapi
        .get_information()
        .then(function (res) {
          if (res.data.status === 200) {
            self.information = res.data.data
            self.formValidate.name = res.data.data.name
          } else {
          }
        })
        .catch(function (e) {
          console.log(e)
        })
    },
    handleSubmit: function (name) {
      let self = this
      self.$refs[name].validate(valid => {
        if (valid) {
          self.changePw()
        } else {
          self.$Message.error('信息填写有误，请检查后重新输入')
        }
      })
    },
    changePw: function () {
      let self = this
      window.myapi
        .changePw({
          oldPw: self.formValidate.oldPw,
          password: self.formValidate.password
        })
        .then(function (res) {
          if (res.data.status === 200) {
            self.$Message.success('密码修改成功，请重新登录')
            self.logout()
          } else {
            self.$Message.error(res.data.msg)
          }
        })
        .catch(function (e) {
          console.log(e)
        })
    },
    logout: function () {
      sessionStorage.menuLocal = '';
      this.$router.push({ path: '/login' })
    },
    goHome: function () {
      window.history.go(-1)
      // this.$router.push({ path: '/main/dashboard' })
    },
    changeTabs (name) {
      this.selectValue = name
    }
  }
}
</script>

<style scoped>
.images {
  position: relative;
}

.images span {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 60px;
  text-align: center;
  line-height: 120px;
  background-color: #f3f3f3;
  margin-top: 40px;
  margin: 0 auto;
  overflow: hidden;
}

/deep/ .ivu-upload-select {
  display: block;
  margin-top: 40px;
}

.information p {
  line-height: 40px;
}
</style>
